<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>题</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    body,
    html {
        height: 100vh;
        background-color: #606266;
    }

    #box {
        display: flex;
        flex-direction: column;
        height: 100vh;

    }

    header {
        height: 50px;
        font-size: 18px;
        text-align: center;
        font-weight: 700;
        line-height: 50px;
        border-bottom: 1px solid #dad9d9;

    }

    section {
        flex: 1;
        overflow-y: auto;
        margin-top: 20px;
    }

    footer {
        height: 36px;
        display: flex;
        justify-content: center;
        padding: 10px 0;
        border-top: 1px solid #ccc;
    }

    #button {
        color: #fff;
        background-color: #409eff;
        border-color: #409eff;
        display: inline-block;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
        -webkit-appearance: none;
        text-align: center;
        box-sizing: border-box;
        outline: none;
        margin: 0;
        transition: .1s;
        font-weight: 500;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        padding: 12px 20px;
        font-size: 14px;
        border-radius: 4px;
        outline: none;
        width: 80%;
        text-decoration: none;
        border: none;

    }

    .section_li {
        list-style: decimal;
        margin-left: 30px;
        margin-bottom: 20px;
    }

    .section_li_p {
        font-size: 18px;
        color: #303133;
    }

    .section_li_ol {
        margin-left: 30px;
    }

    .section_li_ol_li {
        list-style: upper-alpha;
        padding: 10px;
        color: #606266;


    }

    @media screen and (min-width:650px) {
        #box {
            width: 650px;
            margin: 0 auto;
            background-color: #fff;

        }

        #box {
            width: 650px;
            margin: 0 auto;
            background-color: #fff;

        }
    }
</style>

<body>
    <div id="box">
        <header id="topicName"> 题名称</header>
        <section>
            <ul class="section_ul">
                <!-- <li class="section_li">
                    <p class="section_li_p">xxxxxxxxxxxxx</p>
                    <ol class="section_li_ol">
                        <li class="section_li_ol_li">
                           
                            <label>
                                <input type="radio" id="option1" name="option" value="option1">
                                <span>选项1</span>
                            </label>

                        </li>


                    </ol>
                </li> -->
            </ul>
        </section>
        <footer>
            <button id="button">提 交</button>
        </footer>
    </div>
    <div id="box1">
        <img style="width: 100%;margin-top: 200px;" src="../../assets//images/tjwj.png" alt="">
    </div>
    <dialog id="myDialog">
        <h1>对话框标题</h1>
        <p>对话框内容</p>
        <button id="closeDialogButton">关闭对话框</button>
    </dialog>
</body>

</html>
<!-- <script src="../../api/jquery.js"></script> -->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
    var dialog = document.getElementById('myDialog');
    var openButton = document.getElementById('openDialogButton');
    var closeButton = document.getElementById('closeDialogButton');
    $('#box1').hide()
    $('#box').show()
    const Url = "http://192.168.2.110:8080"
    var tableList = []
    function looKList() {
        $.ajax({
            url: Url + '/openApi/projectEvaluate/selectDiaoChaWenJuanByEvaluateId',
            type: 'GET',
            data: { evaluateId: 7 },
            success: function (res) {
                var listDate = JSON.parse(res.data.questionContent)
                tableList = JSON.parse(res.data.questionContent)
                $("#topicName").text(res.data.questionTitle)
                var result = ""
                listDate.forEach((item, index) => {
                    var obj = ""
                    for (let i = 0; i < item.AnswerList.length; i++) {
                        obj += `
                                    <li class="section_li_ol_li">
                                        
                                         <label>
                                            <input type="radio" id="option${index}" name="option${index}" value="${item.AnswerList[i].selectedId}">
                                            <span>${item.AnswerList[i].option}</span>
                                         </label>
                                    </li>
                                 `
                    }
                    result += `
                                    <li class="section_li">
                                        <p class="section_li_p">${item.topicName}</p>
                                        <ol class="section_li_ol">
                                            ${obj}
                                        </ol>
                                    </li>
                                `
                });
                $(".section_ul").append(result)


            },
            error: function (error) {
                console.log(error, "211");
            }
        });
    }
    looKList()
    // 提交
    $('#button').on('click', function (event) {
        for (let i = 0; i < tableList.length; i++) {
            var isChecked = $(`#option${i}:checked`).length > 0
            if (!isChecked) {
                alert('请填写所有选项')
                return
            }
            tableList[i].IsChecked = $(`#option${i}:checked`).val()
        }
        $.ajax({
            url: Url + '/openApi/evaluateQuestionNaireLog/submitNaireLog',
            type: 'post',
            headers: {
                'Content-Type': 'application/json',

            },
            data: JSON.stringify({ evaluateId: 7, questionContent: JSON.stringify(tableList) }),
            success: function (res) {
                if (res.code == 200) {
                    $('#box').hide()
                    $('#box1').show()

                }
            },
        });
    });

</script>